<template>
  <div>
    <a-modal v-model:visible="visible" :width="1020" title="编辑备忘录合同" :bodyStyle="bodyStyle"  @ok="handleOk">
      <a-form :model="formState" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row gutter="16">
          <a-col :span="8">
            <a-form-item name="dragger" no-style>
              <a-upload-dragger v-model:fileList="formState.dragger" name="files" action="/upload.do">
                <div class="dragger-img">
                  <img src="../../../../assets/images/ResourceContract/pdf.png" alt="">
                </div>
                <p class="ant-upload-text" :style="{color: '#2C3749'}">将文件拖到此处，或 <span :style="{color: '#0062AD'}">点击上传</span> </p>
                <p class="ant-upload-hint" :style="{color: '#6B7A8B', fontSize: '14px'}" >支持pdf, word格式</p>
              </a-upload-dragger>
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <div class="form-item-border">
              <a-form-item label="买方">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="请输入"/>
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="卖方">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="请输入"/>
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="交货方式">
                <a-select :bordered="false" v-model:value="formState.v2" :options="areas" />
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="装载港">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="请输入"/>
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="卸载港">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="请输入"/>
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="卸载港">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="请输入"/>
              </a-form-item>
            </div>
            <div class="form-item-flex">
              <div class="form-item-border" :style="{width: '80%'}">
                <a-form-item label="交付窗口">
                  <a-date-picker :bordered="false" v-model:value="formState.datePicker" value-format="YYYY-MM-DD" />
                </a-form-item>
              </div>
              <div class="form-item-border">
                <a-form-item>
                  <a-select  :style="{width: '100px'}"  v-model:value="formState.v5" :bordered="false" :options="areas5" />
                </a-form-item>
              </div>
            </div>
            <div class="form-item-flex">
              <div class="form-item-border" :style="{width: '80%'}">
                <a-form-item label="合同价格">
                  <a-input :bordered="false" v-model:value="formState.value1" placeholder="请输入"/>
                </a-form-item>
              </div>
              <div class="form-item-border">
                <a-form-item>
                  <a-select :style="{width: '100px'}" v-model:value="formState.v4" :bordered="false" :options="areas4" />
                </a-form-item>
              </div>
            </div>
            <div class="form-item-flex">
              <div class="form-item-border">
                <a-form-item label="合同装/卸载量">
                  <a-input :style="{width: '100px'}" :bordered="false" v-model:value="formState.value1" placeholder="请输入"/>
                </a-form-item>
              </div>
              <div class="form-item-border">
                <a-form-item>
                  <a-select :style="{width: '53px'}" :bordered="false" v-model:value="formState.v2" :options="areas2" />
                </a-form-item>
              </div>
              <div class="form-item-border">
                <a-form-item>
                  <a-input-number :style="{width: '80px'}" :bordered="false" v-model:value="formState.inputNumber" :min="1" :max="10" />
                </a-form-item>
              </div>
              <div class="form-item-border">
                <a-form-item>
                  <a-select :style="{width: '53px'}" :bordered="false" v-model:value="formState.v2" :options="areas2" />
                </a-form-item>
              </div>
              <div class="form-item-border">
                <a-form-item>
                  <a-input-number :bordered="false" v-model:value="formState.inputNumber" :min="1" :max="10" />
                </a-form-item>
              </div>
              <div class="form-item-border">
                <a-form-item>
                  <a-select :style="{width: '90px'}" v-model:value="formState.v3" :bordered="false" :options="areas3" />
                </a-form-item>
              </div>
            </div>
            <div class="form-item-border">
              <a-form-item label="船舶名称">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="请选择船舶名称"/>
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="IMO">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="输入IMO"/>
              </a-form-item>
            </div>
            <div class="form-item-flex">
              <div class="form-item-border" :style="{width: '80%'}">
                <a-form-item label="允许装载时间">
                  <a-date-picker :bordered="false" v-model:value="formState.datePicker" value-format="YYYY-MM-DD" />
                </a-form-item>
              </div>
              <div class="form-item-border">
                <a-form-item>
                  <a-select  :style="{width: '100px'}"  v-model:value="formState.v5" :bordered="false" :options="areas5" />
                </a-form-item>
              </div>
            </div>
            <div class="form-item-border">
              <a-form-item label="蒸发率">
                <a-input :bordered="false" v-model:value="formState.value1" placeholder="请输入蒸发率"/>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <div class="from-btn-right">
          <a-button key="back">取消</a-button>
          <a-button key="submit" @click="handleOk" class="search-btn1">保存</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import {ref} from "vue";
const visible = ref(false);
const bodyStyle = ref({})
const areas = ref([
  {
    label: 'FOB',
    value: 'a'
  }
])
const areas2 = ref([
  {
    label: '+',
    value: 'ab'
  },
  {
    label: '-',
    value: 'af'
  },
  {
    label: '±',
    value: 'at'
  }
])
const areas3 = ref([
  {
    label: '吨',
    value: 'avb'
  },
  {
    label: '立方米',
    value: 'arf'
  },
  {
    label: '百万英热',
    value: 'att'
  }
])
const areas4 = ref([
  {
    label: '美元',
    value: 1
  },
  {
    label: '人民币',
    value: 2
  },
  {
    label: '欧元',
    value: 3
  }
])
const areas5 = ref([
  {
    label: '本地时间',
    value: 'avvbb'
  },
  {
    label: '北京时间',
    value: 'arwef'
  },
])
const labelCol = ref(
    {
      style: {
        width: '100px'
      },
    },
)

const wrapperCol = ref({
  span: 20
})
const formState = ref({
  value1: '',
  value2: '-',
  dragger: [],
  inputNumber: 1,
  datePicker: '',
  v2: 'ab',
  v3: 'avb',
  v4: 'arwf',
  v5: 'avvbb'
})
const showModal = () => {
  visible.value = true;
};
const handleOk = e => {
  console.log(e);
  visible.value = false;
};
// eslint-disable-next-line no-undef
defineExpose({
  showModal,
  handleOk
})
</script>

<style lang="scss" scoped>
.form-item-flex {
  display: flex;
  justify-content: space-between;
  .form-item-border {
    margin-right: 4px;
  }
}
.from-btn-right {
  height: 62px;
  line-height: 62px;
  background: #ffffff;
  // box-shadow: 0px -4px 9px 0px rgba(0,0,0,0.09);
}
.dragger-img {
  margin-top: 40%;
  img {
    width: 114px;
    height: 110px;
  }
}
</style>
